<template>
    <div>
        <input type="text" v-model="searchText" @keyup.enter="searchAddress" placeholder="请输入搜索地址">
        <baidu-map class="bm-view" :center="{ lng: 116.403185, lat: 39.92272 }" :zoom="15" :scroll-wheel-zoom="true"
            :instance="mapInstance">
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT" :enableGeolocation="true"
                :showZoomInfo="true"></bm-navigation>
            <bm-scale anchor="BMAP_ANCHOR_TOP_LEFT"></bm-scale>
            <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-panorama>
            <bm-marker :position="{ lng: 116.403401, lat: 39.924823 }" :dragging="true" :raiseOnDrag="true">
                <bm-info-window :show="showInfoWindow" @close="showInfoWindow = false" @open="showInfoWindow = true">
                    示例标记点信息
                </bm-info-window>
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { BaiduMap, BmNavigation, BmScale, BmPanorama, BmMarker, BmInfoWindow } from 'vue-baidu-map-3x';

const mapInstance = ref(null);
const searchText = ref('');
const showInfoWindow = ref(false);

const searchAddress = () => {
    if (searchText.value) {
        mapInstance.value.search(searchText.value).then((result) => {
            console.log(result);
        }).catch((error) => {
            console.error('搜索出错:', error);
        });
    }
};
</script>

<style scoped>
.bm-view {
    width: 100%;
    height: 600px;
    margin-top: 20px;
}
</style>